<route>
    {
        meta: {
            enabled: false
        }
    }
</route>

<script setup>
import useFileStore from '@/store/modules/file'
import { ElMessageBox } from 'element-plus'

const total = ref(0)
const fileStore = useFileStore()
const dataList = ref([])
const dialogVisible = ref(false);
const noticeVisible = ref(false);
const currentPage = ref(1);
const detailsData = ref({});
const phoneNumbers = ref([]);

onMounted(() => {
    getList(1)
})

function getList(page) {
    fileStore.onlineContent(page - 1, 10).then(res => {
        dataList.value = res.content
        total.value = res.totalElements
    })
}
function getInfo(item) {
    detailsData.value = item
    dialogVisible.value = true
}

function getNotice() {
    noticeVisible.value = true
    fileStore.getSetting().then(res => {
        phoneNumbers.value = res.onlineContent.notificationPhoneNumbers
    })
}

function addNotice() {
    let obj = {
        "onlineContent": {
            "notificationPhoneNumbers": phoneNumbers.value
        }
    }
    fileStore.addSetting(obj).then(res => {
        ElMessage({
          type: "success",
          message: "设置成功"
        })
        noticeVisible.value = false 
    })
}

function addPhone() {
    phoneNumbers.value.push("")
}

function deletePhone(index) {
    phoneNumbers.value.splice(index, 1)
}

function handleSizeChange() {
    getList(currentPage.value)
}
function handleCurrentChange() {
    getList(currentPage.value)
}
</script>

<template>
    <div>
        <page-header title="舆情管理">
            <template #content>`
                <p>舆情管理</p>
            </template>
        </page-header>

        <page-main>
            <el-row :gutter="20">
                <el-col>
                    <el-card class="box-card">
                        <div class="clearfix" slot="header">
                            <div class="card-title">舆情列表</div>
                        </div>
                        <el-button type="primary" @click="getNotice">设置通知</el-button>
                        <el-table 
                        ref="table"
                        :data="dataList"
                        border
                        stripe>
                            <el-table-column prop="title" label="标题"></el-table-column>
                            <el-table-column prop="summary" label="摘要"></el-table-column>
                            <el-table-column prop="temp" label="操作" width="220">
                                <template #default="scope">
                                    <el-button type="primary" @click="getInfo(scope.row)">
                                        详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="padding: 10px 0;">
                        <!--内边距空一些-->
                            <el-pagination
                                :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="10"
                                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                            <!--1.page-sizes一般设置为5，10，15，20-->
                            <!--1.page-size一般设置为10，即每页10个-->
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-dialog
            v-model="dialogVisible"
            :title="detailsData.title">
                <div>副标题：{{ detailsData.subTitle }}</div>
                <div>原作者：{{ detailsData.author }}</div>
                <div>摘要：{{ detailsData.summary }}</div>
                <div>内容：{{ detailsData.content }}</div>
                <div>关键词：{{ detailsData.keywords }}</div>
                <div>原地址：{{ detailsData.url }}</div>
                <div>媒体名称：{{ detailsData.mediaName }}</div>
                <div>栏目名称：{{ detailsData.columnName }}</div>
                <div>情感正反面：{{ detailsData.positivevalue }}</div>
                <div>地点：{{ detailsData.location }}</div>
                <div>人物：{{ detailsData.personalname }}</div>
                <div>核心词：{{ detailsData.coreword }}</div>
                <div>发布时间：{{ detailsData.publishTime }}</div>
                <div>来源：{{ detailsData.comefrom }}</div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">关闭</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog
            v-model="noticeVisible"
            title="设置通知"
            width="25%">
                <el-form>
                    <el-button type="success" @click="addPhone">添加</el-button>
                    <el-form-item label="手机号" v-for="(item, index) in phoneNumbers">
                        <el-input v-model="phoneNumbers[index]" placeholder="手机号"></el-input>
                        <el-button v-if="index != 0" type="danger" @click="deletePhone(index)">删除</el-button>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="noticeVisible = false">关闭</el-button>
                        <el-button @click="addNotice" type="primary">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </page-main>
    </div>
</template>

<style scoped>
.card-d {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgb(14, 165, 233);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}
.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
a {
    text-decoration: none;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node .update-node {
  display: flex;
  justify-content: space-around;
}
.custom-tree-node .update-node span {
  display: block;
  margin-left: 8px;
}
</style>
